<template>
    <div>
        <div v-if="mode === 'DESIGN'">
            <!-- <el-button disabled icon="user" type="primary" size="default" round>选择人员</el-button>
            <span class="placeholder"> {{ placeholder }}</span> -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item :label="$t('module.name')" disabled>
                        <el-input disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('module.jobNo')">
                        <el-input disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('module.dept')">
                        <el-input disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <div v-else-if="mode === 'PC' && !readonly" style="margin:0!important;">
            <el-row :gutter="20">
                <el-col :span="8">
                    <!-- <el-button icon="user" type="primary" size="default" round
                            @click="$refs.orgPicker.show()">选择人员</el-button> -->
                    <!-- <el-tag size="small" style="margin: 5px" v-for="(dept, i) in _value" :key="i">{{ dept.name
                            }}</el-tag> -->
                    <el-form-item :label="$t('module.name')" v-if="_value.length > 0">
                        <el-input v-model="_value[0].name" :placeholder="$t('module.pleaseSelect')" readonly>
                            <template #append><span @click="$refs.orgPicker.show()">{{ $t('module.select')
                                    }}</span></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item :label="$t('module.name')" v-else>
                        <el-input v-model="_value.name" :placeholder="$t('module.pleaseSelect')">
                            <template #append><span @click="$refs.orgPicker.show()">{{ $t('module.select')
                                    }}</span></template>
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('module.jobNo')" v-if="_value.length > 0">
                        <el-input v-model="_value[0].id" disabled />
                    </el-form-item>
                    <el-form-item :label="$t('module.jobNo')" v-else>
                        <el-input v-model="_value.id" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('module.dept')" v-if="_value.length > 0">
                        <el-input v-model="_value[0].deptName" disabled />
                    </el-form-item>
                    <el-form-item :label="$t('module.dept')" v-else>
                        <el-input v-model="_value.deptName" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <org-picker type="user" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected" />
        </div>
        <div v-else-if="mode === 'MOBILE' && !readonly" style="margin:0!important;">
            <div style="padding-left: 30px;">
                {{ $t('module.name') }} <field readonly clearable @clear="_value = []" right-icon="arrow" clickable
                    v-model="deptDesc" :placeholder="placeholder" @click="$refs.orgPicker.show()"></field>
                <org-picker :pc-mode="false" type="user" :multiple="multiple" ref="orgPicker" :selected="_value"
                    @ok="selected" />
                <p style="margin:10px 0 0 0">{{ $t('module.jobNo') }}</p>
                <field v-if="_value.length > 0" v-model="_value[0].id" type="string"
                    :placeholder="$t('module.selectPeople')" disabled />
                <field v-else></field>
                <p style="margin:10px 0 0 0">{{ $t('module.dept') }}</p>
                <field v-if="_value.length > 0" v-model="_value[0].deptName" type="string"
                    :placeholder="$t('module.selectPeople')" disabled />
                <field v-else></field>
            </div>
        </div>
        <div v-else class="preview" style="margin:0!important;">
            <template v-for="(user, i) in _value" :key="i">
                <el-form-item :label="$t('module.name')" style="width:33%">
                    <el-input v-model="user.name" :disabled="readonly" />
                </el-form-item>
                <el-form-item :label="$t('module.jobNo')" style="width:33%">
                    <el-input v-model="user.id" :disabled="readonly" />
                </el-form-item>
                <el-form-item :label="$t('module.dept')" style="width:33%">
                    <el-input v-model="user.deptName" :disabled="readonly" />
                </el-form-item>
            </template>
        </div>
    </div>
</template>

<script>
import { Field } from 'vant'
import componentMinxins from '../ComponentMinxins'
import OrgPicker from '@/components/common/OrgPicker.vue'

export default {
    mixins: [componentMinxins],
    name: 'Applicant',
    components: { Field, OrgPicker },
    props: {
        modelValue: {
            type: Array,
            default: () => {
                return []
            },
        },
        placeholder: {
            type: String,
            default: 'webAuto.selectPersonnel',
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        expansion: {
            type: Boolean,
            default: false,
        },
        options: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    computed: {
        deptDesc: {
            get() {
                if (this._value && this._value.length > 1) {
                    return `${this._value[0].name}${this._value[1].name}${this.$t('webAuto.class')}${this._value.length}${this.$t('webAuto.people')}`
                } else if (this._value && this._value.length > 0) {
                    return this._value[0].name
                } else {
                    return null
                }
            },
            set(val) {
                // this.$emit('update:modelValue', val)
            },
        },
    },
    data() {
        return {
            showOrgSelect: false,
        }
    },
    methods: {
        selected(values) {
            // console.log(values)
            this.showOrgSelect = false
            this._value = values
        },
        delDept(i) {
            this._value.splice(i, 1)
        },
    },
    created() {
        // console.log(this._value)
        if (this._value.length == 0) {
            // 设置申请人默认为登录人
            let people = JSON.parse(localStorage.getItem('loginUser')) || {}
            if (Object.keys(people).length > 0) {
                people.avatar = null
                people.deptName = people.deptName || people.position
                people.type = "user"
                people.selected = false
                people.isLeader = false
                this.selected([people])
            }
        }
    },
    emits: ['update:modelValue'],
}
</script>

<style lang="less" scoped>
.placeholder {
    margin-left: 10px;
    color: #adabab;
    font-size: smaller;
}

.el-form-item__content {
    margin: 0 !important;
}

.preview {
    display: flex;
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;

    :deep(.avatar) {
        margin: 0 5px;
    }
}
</style>